<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app';
import { useDebounceFn } from '@vueuse/core';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { computed, getCurrentInstance, inject, onMounted, ref, watch } from 'vue';
import { AUTO_FIT_SCALE } from '@/enums/autofit.enums';
import { useAccurateTimePeriod } from '@/hooks/useAccurateTimePeriod';
import { useAppStore } from '@/store/appStore';
import { createClickCounter } from '@/utils';
import { adjustFontSizeToFit, getRect } from '@/utils/dom.utils';
import { ls } from '@/utils/ls.utils';

const { proxy } = getCurrentInstance();

const pageTitle = ref('自助服务系统');
function getPageTitle() {
  if (!getCurrentPages) {
    return;
  }
  const lastPage = getCurrentPages().slice(-1)[0];
  const currRoute = (lastPage as any)?.$page;
  pageTitle.value = currRoute?.meta?.navigationBar?.titleText || '自助服务系统';
}

const { dateNow } = useAccurateTimePeriod();

const { hospitalInfo } = storeToRefs(useAppStore());

const hdTileText = computed(() => {
  return `${hospitalInfo.value?.hospitalName || ''}`;
});

const $titleWrap = '.title-wrap';
const $titleText = '.title-text';
const lsKey = 'hdFontSize';
const autoFitScale = inject(AUTO_FIT_SCALE);
const hdTextFontSize = ref(ls.get(lsKey, 44));
const adjustFontSize = useDebounceFn(async () => {
  await adjustFontSizeToFit({
    maxSize: 120,
    fontSizeRef: hdTextFontSize,
    scale: autoFitScale.value,
    queryRect() {
      return Promise.all([getRect($titleWrap, false, proxy), getRect($titleText, false, proxy)]);
    }
  });
  ls.set(lsKey, hdTextFontSize.value);
}, 800);

watch([adjustFontSize, autoFitScale], () => {
  adjustFontSize();
});

onMounted(() => {
  getPageTitle();
  adjustFontSize();
});

onShow(() => {
  getPageTitle();
  adjustFontSize();
});

const handleGoToSetting = createClickCounter(3, 300, () => {
  uni.navigateTo({
    url: '/pages/setting/index'
  });
});
</script>

<template>
  <view class="app-header flex items-center">
    <view class="hd-left flex items-center">
      <image :src="hospitalInfo?.logoInfo" class="hd-left__logo" />
      <view class="title-wrap hd-left__name w-220 overflow-hidden">
        <view :style="{ fontSize: `${hdTextFontSize}px` }" class="title-text inline-block whitespace-nowrap">
          {{ hdTileText }}
        </view>
      </view>
    </view>
    <view class="hd-center flex-1">
      {{ pageTitle }}
    </view>
    <view class="hd-right flex flex-col justify-center" @click="handleGoToSetting">
      <view class="hd-right__week">
        {{ dayjs(dateNow).format('dddd') }}
      </view>
      <view class="hd-right__time">
        {{ dayjs(dateNow).format('YYYY年MM月DD日 HH:mm:ss') }}
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.app-header {
  background-color: var(--primary);
  height: 138px;
  color: #fff;
  overflow: hidden;
  .hd-left {
    padding-left: 32px;
    .hd-left__logo {
      margin-right: 13px;
      width: 62px;
      height: 62px;
    }
    .hd-left__name {
      font-weight: 500;
    }
  }

  .hd-center {
    font-weight: bold;
    font-size: 53px;
    text-align: center;
  }

  .hd-right {
    height: 100%;
    padding-left: 41px;
    padding-right: 41px;
    position: relative;
    z-index: 2;

    &::after {
      position: absolute;
      content: '';
      top: 0;
      right: -20px;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: #015acb;
      transform: skewX(-20deg);
    }
    .hd-right__week {
      font-size: 36px;
      font-weight: 500;
      text-align: right;
    }
    .hd-right__time {
      font-size: 24px;
      font-weight: normal;
    }
  }
}
</style>
